// webpack  是基于node的打包工具 所以配置就是向外暴露一个配置对象
// 要遵循CommonJS规范
const path = require('path')
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

const { webpack } = require('webpack')

module.exports = {

    mode:'production',
    // 配置对象
    // 配置入口 可以是相对路径
    entry: './src/main.js',
    output: {
        //配置出口 必须是绝对路径
        //__dirname:表示当前文件所在目录的聚堆路径
        path: path.join(__dirname, './dist'),//路径
        filename: 'bundle.js'//文件名
    },
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            // 以此为基准生成打包后html文件
            template: './public/index.html'
        })
    ],
    // ...其他代码
    module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
            {
                test: /\.css$/, // 匹配所有的css文件
                // use数组里从右向左运行
                // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
                // 再用 style-loader 将样式, 把css插入到dom中
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/i, // 匹配.less结尾文件
                // 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
                use: ["style-loader", "css-loader", 'less-loader']
            },
            // ...省略其他
            {
                test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
                type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
                // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
                // 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
            },
            { 
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                type: 'asset/resource',  // 当做静态资源直接复制文件
                generator: {
                    filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
                }
            },
            {
                test: /\.js$/, // 匹配js结尾文件
                exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
                use: { 
                    loader: 'babel-loader', // 使用加载器-处理
                    options: {
                        presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
                    }
                }
            },
            
        ]
    },
    // ...其他配置
    devServer: {
        port: 3000, // 端口号
        open: true // 启动后自动打开浏览器
      }

}